<template>
  <div class="test-cascader-easy">
    <CascaderEasy class="item" v-model="defaultCity1" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity2" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity3" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity4" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity5" :data="cityData" @on-change="selectCity" />

    <CascaderEasy class="item" v-model="defaultCity6" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity7" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity8" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity9" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity10" :data="cityData" @on-change="selectCity" />

    <CascaderEasy class="item" v-model="defaultCity11" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity12" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity13" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity14" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity15" :data="cityData" @on-change="selectCity" />

    <CascaderEasy class="item" v-model="defaultCity16" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity17" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity18" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity19" :data="cityData" @on-change="selectCity" />
    <CascaderEasy class="item" v-model="defaultCity20" :data="cityData" @on-change="selectCity" />
  </div>
</template>

<script>
import cityData from './city'
export default {
  name: 'TestCascaderEasy',
  data () {
    return {
      cityData: cityData,
      defaultCity1: ['北京', '北京', '东城'],
      defaultCity2: ['台湾', '云林', '元长'],
      defaultCity3: ['辽宁', '丹东', '东港'],
      defaultCity4: ['陕西', '西安', '西安'],
      defaultCity5: ['台湾', '云林', '元长'],
      defaultCity6: ['台湾', '云林', '元长'],
      defaultCity7: ['台湾', '云林', '元长'],
      defaultCity8: ['台湾', '云林', '元长'],
      defaultCity9: ['台湾', '云林', '元长'],
      defaultCity10: ['台湾', '云林', '元长'],
      defaultCity11: ['台湾', '云林', '元长'],
      defaultCity12: ['台湾', '云林', '元长'],
      defaultCity13: ['台湾', '云林', '元长'],
      defaultCity14: ['台湾', '云林', '元长'],
      defaultCity15: ['台湾', '云林', '元长'],
      defaultCity16: ['台湾', '云林', '元长'],
      defaultCity17: ['台湾', '云林', '元长'],
      defaultCity18: ['台湾', '云林', '元长'],
      defaultCity19: ['台湾', '云林', '元长'],
      defaultCity20: ['台湾', '云林', '元长']
    }
  },
  beforeCreate () {
    console.time('组件渲染时间')
  },
  mounted () {
    console.timeEnd('组件渲染时间')
  },
  methods: {
    selectCity (value, arr) {
      console.log('selectCity', value, arr)
    }
  }
}
</script>

<style scoped lang="less">
.test-cascader-easy {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 20%;
    padding: 5px;
    margin-bottom: 20px;
  }
}
</style>
